<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿了么</title>
    <!--    <link href="input.css" type="text/css" rel="stylesheet">-->
    <link href="css/output.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
          integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
          crossorigin="anonymous"/>
    <!--    <script src="https://cdn.tailwindcss.com"></script>-->

</head>
<body>

<div class="bodyPad">

    <div class="mainPad">
        <div class="headPad">
            <div class="pl-4">
                <i class="fas fa-map-marker-alt"></i>
                呈贡大学城-云南大学
            </div>
            <div class="m-4">
                <input type="text" placeholder="搜索饿了么商家，商铺名称"/>
            </div>
        </div>
        <div>
            <!--商品分类-->
            <div class="cataMenu">
                <div class="grid grid-cols-5 gap-3">
                    <div>
                        <img src="images/沙拉.png">
                        沙拉
                    </div>
                    <div>
                        <img src="images/面包.png">
                        面包
                    </div>
                    <div>
                        <img src="images/白菜.png">
                        白菜
                    </div>
                    <div><img src="images/奶茶.png">
                        奶茶
                    </div>
                    <div><img src="images/汉堡包.png">
                        汉堡包
                    </div>
                    <div><img src="images/蔬菜.png">
                        蔬菜
                    </div>
                    <div><img src="images/面包.png">
                        面包
                    </div>
                    <div><img src="images/面包.png">
                        面包
                    </div>
                    <div><img src="images/面包.png">
                        面包
                    </div>
                    <div><img src="images/面包.png">
                        面包
                    </div>
                </div>
            </div>
            <!--广告-->
            <div class="adPad">
                <a href="#">
                    <img src="https://img.alicdn.com/imgextra/i2/6000000000220/O1CN01pk5zuJ1DUnsytDOmG_!!6000000000220-2-octopus.png"/>
                </a>
            </div>
            <!--商家推荐列表-->
            <div class="businessPad">
                <div class="titlePad">
                    <span></span>
                    推荐商家
                    <span></span>
                </div>
                <div class="searchBar">
                    <div>综合排序</div>
                    <div>距离最近</div>
                    <div>销量最高</div>
                    <div>筛选</div>
                </div>
                <div class="businessList">
                    <div class="businessCard">
                        <div class="businessIcon">
                            <img src="//g-search2.alicdn.com/img/bao/uploaded/i4/i3/6000000007668/O1CN01X0Oe8K26Vzn1q5cX1_!!6000000007668-0-picassoopen.jpg">
                        </div>
                        <div class="businessInfo">
                            <div>万家饺子</div>
                            <div>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                4.9月销售992
                            </div>
                            <div>￥15元起</div>
                            <div>万家饺子</div>
                            <div>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                4.9月销售992
                            </div>
                            <div>￥15元起</div>
                            <div>万家饺子</div>
                            <div>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                4.9月销售992
                            </div>
                            <div>￥15元起</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="barPad">
        <div>
            <i class="fas fa-home"></i>
            <br/>
            首页
        </div>
        <div>
            <i class="fad fa-corn"
               style="--fa-secondary-opacity: 1.0; --fa-primary-color: mediumseagreen; --fa-secondary-color: gold;"></i>
            <br/>
            发现
        </div>
        <div>
            <i class="fad fa-cookie-bite"
               style="--fa-secondary-opacity: 1.0; --fa-primary-color: saddlebrown; --fa-secondary-color: burlywood;"></i>
            <br/>
            订单
        </div>
        <div>
            <i class="fad fa-user-graduate" style="color:aqua"></i>
            <br/>
            我的
        </div>
    </div>

</div>

</body>
</html>
